<template>
	<div class="app-message-popover">
		<a-popover placement="bottomRight" trigger="click" arrow-point-at-center>
			<template #content>
				<a-tabs
					v-model:activeKey="activeKey"
					:tabBarGutter="30"
					class="app-message-popover__content"
					centered
				>
					<a-tab-pane
						key="notice"
						:tab="$t('common.messagepopover.mynoticelabel')"
						>通知列表</a-tab-pane
					>
					<a-tab-pane
						key="message"
						:tab="$t('common.messagepopover.mymsgslabel')"
						force-render
						>消息列表</a-tab-pane
					>
					<a-tab-pane
						key="task"
						:tab="$t('common.messagepopover.mytaskslabel')"
					>
						<a-list item-layout="horizontal" :data-source="tasks">
							<template #renderItem="{ item }">
								<a-list-item>
									<a-list-item-meta :description="item.usertaskContent">
										<template #title>
											<a href="https://www.antdv.com/">{{
												item.usertaskname
											}}</a>
										</template>
										<template #avatar>
											<a-avatar src="@/assets/img/avatar.png" />
										</template>
									</a-list-item-meta>
								</a-list-item>
							</template>
							<template #loadMore>
								<div
									v-if="tasks.length > count"
									class="app-message-popover__more"
								>
									<a-button @click="onLoadMore" size="large" type="link">{{
										$t('common.messagepopover.loadmore')
									}}</a-button>
								</div>
							</template>
						</a-list>
					</a-tab-pane>
				</a-tabs>
			</template>
			<a-badge :dot="showDot">
				<BellOutlined />
			</a-badge>
		</a-popover>
	</div>
</template>

<script setup lang="ts">
import { BellOutlined } from '@ant-design/icons-vue';
import { Http } from '@/http';
import { IParam } from '@/core';
const activeKey = ref('notice');
const showDot = ref<boolean>(false);
const count = ref<number>(10);
const tasks = ref<IParam[]>([]);

const getTasks = () => {
	let url: any = '/wfcore/mytasks';
	Http.getInstance()
		.get(url)
		.then((response: any) => {
			if (response && response.status == 200) {
				const data: any = response.data;
				if (data && data.length > 0) {
					tasks.value = data;
					showDot.value = true;
				} else {
					tasks.value = [];
					showDot.value = false;
				}
			}
		})
		.catch((error: any) => {
			App.getNotificationHelper().error(
				App.ts('common.messagepopover.error', '错误'),
				App.ts('common.generic.requestexception', '请求异常')
			);
		});
};

const onLoadMore = () => {
	count.value += 10;
	// todo
};

onMounted(() => {
	getTasks();
});
</script>
